<template>
    <Page class="basic company">
        <template #header>
        <!-- <template slot="header"> -->
            <RoomInput class="mr-2" multiple :rooms.sync="queryForm.rooms"></RoomInput>
            <EdSelect v-model="queryForm.payCause" :selectParams="data.selectParamsPayCause"></EdSelect>
            <el-input v-model="queryForm.address" placeholder="房屋编号" />
            <el-input v-model="queryForm.ownerName" placeholder="客户姓名" />
            <EdSelect v-model="queryForm.sendStatus" :selectParams="data.selectParamsSendStatus"></EdSelect>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
        </template>
        <PageCard title="收费任务列表">
            <template #actions>
                <!-- <el-button slot="reference"  class="ed-button ed_white_bottom marginRight8" @click="exportBtn()"><i class="el-icon-upload2"></i>导出模板</el-button> -->
                 <el-popover
                        placement="bottom"
                        title=""
                        ref="popoverRef"
                        trigger="click">
                    <div slot="">
                        <el-upload
                                class="avatar-uploader"
                                action=""
                                drag
                                accept=".xlsx"
                                :before-upload="beforeAvatarUpload"
                                :http-request="httpRequest"
                                :show-file-list="false">
                            <i class="el-icon-upload"></i>
                            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                            <div class="el-upload__tip" slot="tip">
                                <el-link icon="el-icon-download" type="primary" download="收费任务导入模板.xlsx" href="/template/收费任务导入模板.xlsx">收费任务模板下载</el-link>
                            </div>
                        </el-upload>
                    </div>
                    <el-button slot="reference"  class="ed-button ed_white_bottom marginRight8 ed-button36" v-has="'charge:task:import'"><i class="el-icon-download"></i>批量导入</el-button>
                </el-popover>
                <el-button class="ed-button ed_black-bottom ed-button36" @click="add()" v-has="'charge:task:add'"><svg-icon icon-class="add-svg"/>添加任务</el-button>
            </template>
            <ApiTable :api="payTaskList" ref="table" :params="queryForm">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="villageName" label="项目"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="address" label="房屋编号" width="230"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="ownerName" label="客户姓名"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="payCause" label="收费类型">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['payCause'], data.selectParamsPayCause.options)}}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="paymentAmount" label="收费金额"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="sendTime" label="下发时间" sortable :formatter="formatDate"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="sendStatus" label="发送状态">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['sendStatus'], data.selectParamsSendStatus.options)}}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="annotation" label="备注"></el-table-column>
                <!-- <el-table-column width="300" :show-overflow-tooltip="true" prop="" label="操作">
                     <template slot-scope="scope">
                        <div class="colorMainTwo fontSize14 inline-block cursorPointer  marginLeft8 line-height1 btnBorder btnUpd" v-has="'basic:company:update'" @click="updateRow(scope.row)">编辑</div>
                        <div class="colorRed fontSize14 inline-block cursorPointer marginLeft8  line-height1 btnBorder btnDel" v-has="'basic:company:delete'" @click="del(scope.row)">删除</div>
                    </template>
                </el-table-column> -->
            </ApiTable>
        </PageCard>
    </Page>
</template>

<script setup>
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import EdSelect from 'src/components/EdSelect.vue'
    import { onActivated, reactive, nextTick, ref } from 'vue'
import { payTaskList, batchImport, exportApi } from "./api";
    import RoomInput from 'src/components/HousePicker/RoomInput.vue'
    import { returnName } from "src/utils/common.js";
    import message from 'src/utils/once-message'
    import router from 'src/router'
    const queryForm = reactive({
        rooms: null,
        payCause: '',
        address: '',
        ownerName:"",
        sendStatus: '',
    })
    const data = reactive({
        selectParamsAddress:{
            options: [{
                value: '选项1',
                label: '楼栋1'
            }, {
                value: '选项2',
                label: '楼栋2'
            }, {
                value: '选项3',
                label: '楼栋3'
            }],
            placeholder: "请选择分期/楼栋/单元"
        },
        selectParamsPayCause:{
            options: [{
                value: '0',
                label: '物业费'
            }, {
                value: '1',
                label: '车位费'
            }, {
                value: '2',
                label: '其他'
            }],
            placeholder:"请选择收费类型"
        },
        selectParamsSendStatus: {
            options: [{
                value: '0',
                label: '失败'
            }, {
                value: '1',
                label: '成功'
            }],
            placeholder:"发送状态"
        },
        upFile:new FormData(),
        confirmRow: null
    })
    const table = ref()
    const edLazyCascader = ref()
    const popoverRef = ref()
    onActivated(()=>{
        nextTick(() => {
            table.value.load(1)
        })
    })
    function search(){
        table.value.load(1)
    }
    function reset(){
        Object.assign(queryForm, {
            rooms: null,
            payCause: '',
            address: '',
            ownerName:"",
            sendStatus: '',
        })
        nextTick(() => {
            table.value.load(1, 10);
        })
    }
    function add(){
        router.push({
            path: '/charge/task-add'
        })
    }
    function updateRow(row){
        router.push({
            path: '/basic/member-update',
            query: { id: row.id },
        })
    }
    const confirmDeleteRef = ref()
    function del(row){
        data.confirmRow = row;
        confirmDeleteRef.value.open("删除确认","确认删除此项数据？","warning")
    }
    // 导入
    function beforeAvatarUpload(file){
        const fileType = file.name.split('.');
        const fileDate = fileType.slice(-1);
        if (['xlsx'].indexOf(fileDate[0]) < 0) {
            message.error({ message: '仅支持文件格式：.xlsx', center: true });
            return false
        }
        const isLt30M = file.size / 1024 / 1024 < 30;
        if (!isLt30M) {
            message.error({ message: '上传文件大小不能超过 30MB!', center: true });
        }else{
            data.upFile = new FormData();
            data.upFile.append("file",file)
        }
        return isLt30M;
    }
    function httpRequest(){
        batchImport(data.upFile).then(response => {
            if(response.code == 20000) {
                message.success({
                    message: '导入成功！',
                    duration: 2000,
                    center:true
                });
                search()
            }
            popoverRef.value.doClose()
        }).catch(()=>{
            popoverRef.value.doClose()
        })
    }
    // 导出
    function exportBtn(){
        // this.dataApi.pages = this.$refs.table.getTabledData();
        let page = table.value.page.total;
        if(page > 0){
            exportApi(queryForm).then((res) =>{
                console.log('导出')
            })
        }else {
            message.info({
                message:"暂无数据导出",
                duration: 2000,
                center:true
            })
        }
    }
    function exportSuccess(){
        data.isEdExport = false;
    }
    function formatDate(row, column) {
        // 获取单元格数据
        let date = row[column.property];
        if (date) {
            return transformDate(date)
        } else {return '' }
    }
    //标准时间格式转yyyy-MM-dd HH:mm:ss
    function transformDate(date) {
        if (date) {
            let dt = new Date(date);
            return dt.getFullYear() + '-' +
                ((dt.getMonth() + 1) < 10 ? ('0' + (dt.getMonth() + 1)) : (dt.getMonth() + 1)) + '-' +
                (dt.getDate() < 10 ? ('0' + dt.getDate()) : dt.getDate()) + ' ' +
                (dt.getHours() < 10 ? ('0' + dt.getHours()) : dt.getHours()) + ':' +
                (dt.getMinutes() < 10 ? ('0' + dt.getMinutes()) : dt.getMinutes()) 
        } else { return '' }
    }

</script>

<style scoped>
.btnBorder{
    border: 1px solid #ccc;
    padding: 5px 15px;
    border-radius: 4px;
}
.btnUpd{
    color: #414448 !important;
    border-color: #414448;
}
.btnPay{
    color: #65A9A5;
    border-color: #65A9A5;
}
.btnDel{
    color: #EE7171;
}
</style>